<!DOCTYPE html>
<html>
    <head>
        <title>js-http-client</title>
        <!-- 引入rxjs实现时间定时更新事件发布与订阅-->
        <script  src="https://unpkg.com/@reactivex/rxjs@6.1.0/dist/global/rxjs.umd.js"></script>
        <!-- 引入momentjs进行时间格式输出 -->
        <script  src="http://cdn.staticfile.org/moment.js/2.18.1/moment.min.js"></script>
        <script src="http://cdn.staticfile.org/moment.js/2.18.1/locale/zh-cn.js"></script>
        <style>
            #resultList{
                width:60%;
                height:auto;
                display: flex;
                flex-direction:column;
                padding:10px;
                background-color:rgba(180, 180, 180, 0.1);
                margin-top:20px;
            }
            .weibo-item{
                padding-left:100px;
                display: flex;
                flex-direction: column;
                position:relative;
                margin-top:10px;
                box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
                border-radius: 10px;
                background-color: #fff;
                height:120px;
                justify-content: center;
            }

            .weibo-item .cover-image{
                width:100px;
                height:120px;
                position:absolute;
                top:0;
                left:0;
                border-radius: 10px 0 0 10px;
            }
            
            .weibo-item .weibo-title{
                font-weight:600;
                font-size:110%;
                margin-left:15px;
                margin-bottom:10px;
            }

            .weibo-item .weibo-text{
                font-size:100%;
                margin-left:15px;
                margin-bottom:10px;
            }
            .weibo-item .weibo-time{
                font-size:100%;
                margin-left:15px;
                margin-bottom:10px;
                color:rgba(80,80,80,0.6);
            }

            .weibo-item .praised{
                position:absolute;
                right:10px;
                top:10px;
                padding:5px 10px;
                background-color:rgb(255,108,55);
                color:#fff;
                text-align: center;
                border-radius: 5px;
            }

            .weibo-item .clear{
                clear:both;
            }
        </style>
    </head>
    <body>
        <h1>影片资讯列表</h1>
        <button id="send">【回调版本】获取数据</button>
        <button id="send2">【promise版本】获取数据</button>
        <button id="send3">【await版本】获取数据</button>
        <div id="resultList">

        </div>
    </body>
    <script>
        var host="118.25.42.197";
        //var host="localhost";
        moment.locale("zh-cn");
        //【回调版本】获取数据
        var btn=document.getElementById("send");
        btn.addEventListener('click',(e)=>{
            //调用发送请求
            getWeiboList();
        })

        //【promise版本】获取数据
        var btn2=document.getElementById("send2");
        btn2.addEventListener('click',(e)=>{
            getDataListPromise();
        })

        //【await版本】获取数据
        var btn3=document.getElementById("send3");
        btn3.addEventListener('click',(e)=>{
            getDataListAwait();
        })

        //【rxjs】创建事件发布：定时发布时间更新事件。
        var timeUpdateEvent=rxjs.Observable.create(observer=>{
            setInterval(()=>{observer.next(new Date().getTime())},60*1000);
        });

        //【回调版本】获取资讯列表数据--回调函数形式
        function getWeiboList(){
            var httpRequest=new XMLHttpRequest();
            var url="http://"+host+":9930/api/weibo/list";
            console.log("getWeiboList","发出获取资讯列表的请求");
            //建立API连接
            httpRequest.open("GET",url);
            //注册http请求的回调函数
            httpRequest.onreadystatechange=getWeiboListCallback;
            //发出请求
            httpRequest.send();
        }
        //【回调版本】定义资讯列表回调函数
        function getWeiboListCallback(e){
            //只处理下载完成的回调
            if(e.target.readyState!=4) return ;
            console.log("进入资讯列表回调函数，且响应下载完成>>>")
            var data=JSON.parse(e.target.response);
            console.log("getWeiboListCallback:","读取httpRequest的响应值",data);
            //在获得资讯列表之后，调用点赞列表
            getPraisedList();

            //渲染资讯列表
            renderingWeiboDataList(data);
        }

        //【回调版本】获取已点赞列表数据--回调函数形式
        function getPraisedList(){
            var httpRequest=new XMLHttpRequest();
            var url="http://"+host+":9930/api/praised/list";
            console.log("getPraisedList","发出获取资讯列表的请求");
            //建立API连接
            httpRequest.open("GET",url);
            //注册http请求的回调函数
            httpRequest.onreadystatechange=getPraisedListCallback;
            //发出请求
            httpRequest.send();
        }
        //【回调版本】定义已点赞列表回调函数
        function getPraisedListCallback(e){
            //只处理下载完成的回调
            if(e.target.readyState!=4) return ;
            console.log("进入已点赞列表回调函数，且完成响应下载>>>")
            console.log("getPraisedListCallback:",e);
            var data=JSON.parse(e.target.response);
            console.log("getPraisedListCallback:","读取httpRequest的响应值",data);
            
            //获取到已点赞数据后，为资讯添加已点赞标记
            if(data && data.length>0){
                for(var i=0;i<data.length;i++){
                    renderingWeiboPraised(data[i]);
                }
            }
        }


        //【promise版本】获取资讯列表数据--promise
        function getWeiboListPromise(){
            //创建一个新的Promise对象，注意创建过程
            return new Promise((resolve,reject)=>{
                var httpRequest=new XMLHttpRequest();
                var url="http://"+host+":9930/api/weibo/list";
                console.log("getWeiboList","发出获取资讯列表的请求");
                //建立API连接
                httpRequest.open("GET",url);
                //使用内置匿名函数形式进行状态监听，当得到正确响应后使用promise的resolve对象触发回调。
                httpRequest.onreadystatechange=function(e){
                    if(e.target.readyState!==4) return;
                    if (e.target.status === 200) {
                        resolve(JSON.parse(e.target.response)) // 正确回调
                    } else {
                        reject(new Error(e.target.statusText)); // 错误回调
                    }
                };
                //发出请求
                httpRequest.send();
            });  
        }

        //【promise版本】获取已点赞的资讯列表数据--promise
        function getPraisedListPromise(){
            //创建一个新的Promise对象，注意创建过程
            return new Promise((resolve,reject)=>{
                var httpRequest=new XMLHttpRequest();
                var url="http://"+host+":9930/api/praised/list";
                console.log("getPraiseList","发出获取已点赞资讯列表的请求");
                //建立API连接
                httpRequest.open("GET",url);
                //使用内置匿名函数形式进行状态监听，当得到正确响应后使用promise的resolve对象触发回调。
                httpRequest.onreadystatechange=function(e){
                    if(e.target.readyState!==4) return;
                    if (e.target.status === 200) {
                        resolve(JSON.parse(e.target.response)) // 触发正确回调，将获得到的响应数据发送给回调
                    } else {
                        reject(new Error(e.target.statusText)); // 错误回调
                    }
                };
                //发出请求
                httpRequest.send();
            });  
        }
        
        //【promise版本】按钮2调用：组合两个列表调用
        function getDataListPromise(){
            //promise的调用方式，使用.then让程序更可读，执行顺序更直观
            //当资讯API正确响应后，执行then里的内容，并且在then里可以操作已获取到的响应数据
            getWeiboListPromise().then((weiboList)=>{
                if(weiboList&&weiboList.length>0){
                    renderingWeiboDataList(weiboList);
                }
            })
			//调用获取点赞列表的API，并等候API正确返回后，进入then内部处理。
			.then(()=>getPraisedListPromise()).then((praiseList)=>{
				if(praiseList && praiseList.length>0){
					for(var i=0;i<praiseList.length;i++){
						renderingWeiboPraised(praiseList[i]);
					}
				}
			})
						
        }

        //【await版本】按钮3调用：基于Promise版本，使用async和await完成两个数据列表的获取
        async function getDataListAwait(){
			//使用await等待两个请求结果返回
			var results=await Promise.all([getWeiboListPromise(),getPraisedListPromise()])
			var weiboList=results[0];
			var praiseList=results[1];
			//渲染资讯列表与点赞列表
            if(weiboList && weiboList.length>0){
                renderingWeiboDataList(weiboList);
				
				//循环遍历已点赞的列表
                if(praiseList && praiseList.length>0){
                    for(var i=0;i<praiseList.length;i++){
                        renderingWeiboPraised(praiseList[i]);
                    }  
                }
            }
        }



        //【界面渲染】定义界面渲染操作，根据请求到的数据绘制列表
        //dataList:影片资讯列表数据
        function renderingWeiboDataList(dataList){
            //获取渲染的div
            var dataBox=document.getElementById("resultList");
			//先删除全部已有子节点
			while(dataBox.hasChildNodes()) {
			    dataBox.removeChild(dataBox.firstChild);
			}
            //循环遍历列表数据
            for(var i=0;i<dataList.length;i++){
                var weiboItem=renderingWeiboItem(dataList[i]);
                dataBox.appendChild(weiboItem);
            }
        }
        //【界面渲染】定义单个元素的界面渲染操作，根据单个资讯信息，返回动态创建的dom
        //dataItem:单个影片资讯数据
        function renderingWeiboItem(dataItem){
            //创建容器节点
            var weiboItemBox=document.createElement("div");
            weiboItemBox.setAttribute("class","weibo-item");
            weiboItemBox.setAttribute("id",dataItem.uuid);
            //创建资讯海报
            var imgBox=document.createElement("img");
            imgBox.setAttribute("class","cover-image");
            imgBox.setAttribute("src",dataItem.movieInfo.coverImage);

            //创建标题
            var itemTitle=document.createElement("div");
            itemTitle.setAttribute("class","weibo-title");
            itemTitle.innerText=dataItem.itemTitle;

            //创建文字内容
            var itemText=document.createElement("div");
            itemText.setAttribute("class","weibo-text");
            itemText.innerText=dataItem.itemText+"：#"+dataItem.movieInfo.movieName+"#";

            //创建时间的显示
            var itemTime=document.createElement("div");
            itemTime.setAttribute("id","time-"+dataItem.uuid);
            itemTime.setAttribute("class","weibo-time");
            var timeString=dataItem.publishTime.replace('T',' ');
            itemTime.innerText=moment(timeString).fromNow();
            
            //创建清除浮动的div
            var clearDiv=document.createElement("div");
            clearDiv.setAttribute("class","clear");

            //将子元素依序加入到容器中
            weiboItemBox.appendChild(imgBox)
            weiboItemBox.appendChild(itemTitle)
            weiboItemBox.appendChild(itemText)
            weiboItemBox.appendChild(itemTime);
            weiboItemBox.appendChild(clearDiv);

            //监听时间更新事件，主动更新发布时间
            timeUpdateEvent.subscribe(()=>{
                console.log("监听到时间更新事件，主动更新发布时间显示",dataItem)
                var timeString=dataItem.publishTime.replace('T',' ');
                var timeDiv=document.getElementById("time-"+dataItem.uuid)
                timeDiv.innerHTML=moment(timeString).fromNow();
            })

            //返回组装好的dom
            return weiboItemBox;
        }

        //【界面渲染】定义单个元素已点赞标记的渲染操作。
        //dataItem:单个已点赞数据
        function renderingWeiboPraised(dataItem){
            //根据资讯的uuid获取到div
            var praisedItem=document.getElementById(dataItem.uuid);
            //向div中添加 已点赞标记。
            var praisedDiv=document.createElement("div");
            praisedDiv.setAttribute("class","praised");
            praisedDiv.setAttribute("id","praised"+dataItem.uuid);
            praisedDiv.innerText="已点赞";

            //将已点赞的div添加到对应的资讯容器中
            praisedItem.appendChild(praisedDiv);
        }


    </script>
</html>